<template>
  <div>
    <h3>商品清单如下：</h3>
    <goodsPrice :arr="arr"></goodsPrice>
    <h3>请选购：</h3>
    <goodsCount :arr="arr" @addCount="addCountHandler" @rdcCount="rdcCountHandler"></goodsCount>
    <h3>总价为：{{allPrice}} </h3>
  </div>
</template>

<script>
import goodsPrice from "./components/6-买点好吃的-price.vue";
import goodsCount from "./components/6-买点好吃的-count.vue";

export default {
  components: {
    goodsPrice,
    goodsCount,
  },
  data() {
    return {
      arr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },



  methods: {
    addCountHandler(index){
      this.arr[index].count++
    },
  rdcCountHandler(index){
    if(this.arr[index].count==0) return alert("你想跟我进货啊？")
    this.arr[index].count--
  }

  },
  computed:{
    allPrice(){
     return this.arr.reduce((sum,value)=>{
        return  sum + value.price*value.count 
      },0)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>